<template>
  <ul class="prolist">
<<<<<<< HEAD
    <div>
      <router-link :to='"/detail?proid=" + item.proid' tag='li' class="proitem" v-for='item of prolist' :key='item.proid'>
        <div class="itemimg">
          <img :src="item.proimg" alt="">
        </div>
        <div class="itemifo">
          <h4>{{ item.proname }}</h4>
          <p>{{ item.desc }}</p>
          <p>销量：{{ item.sales }}</p>
          <div class="price">价格：{{ item.price }}   评分：{{ item.rating }}</div>
        </div>
      </router-link>
    </div>
=======
    <!-- <li class="proitem" :class="hot ? 'hotitem' : ''" v-for="item of prolist" :key="item.proid">
      <div class="itemimg">
        <img :src="item.proimg" alt="">
      </div>
      <div class="iteminfo">
        <h3>{{ item.proname }}</h3>
        <div class="desc">{{ item.desc }}</div>
      </div>
    </li> -->
    <!-- <router-link tag="li" :to="'/detail/' + item.proid" class="proitem" :class="hot ? 'hotitem' : ''" v-for="item of prolist" :key="item.proid">
      <div class="itemimg">
        <img :src="item.proimg" alt="">
      </div>
      <div class="iteminfo">
        <h3>{{ item.proname }}</h3>
        <div class="desc">{{ item.desc }}</div>
      </div>
    </router-link> -->
    <!-- <router-link tag="li" :to="{ name: 'detail', params: { proid: item.proid }}" class="proitem" :class="hot ? 'hotitem' : ''" v-for="item of prolist" :key="item.proid">
      <div class="itemimg">
        <img :src="item.proimg" alt="">
      </div>
      <div class="iteminfo">
        <h3>{{ item.proname }}</h3>
        <div class="desc">{{ item.desc }}</div>
      </div>
    </router-link> -->
    <li class="proitem" :class="hot ? 'hotitem' : ''" v-for="item of prolist" :key="item.proid" @click="toDetail(item.proid)">
      <div class="itemimg">
        <img :src="item.proimg" alt="">
      </div>
      <div class="iteminfo">
        <h3>{{ item.proname }}</h3>
        <div class="desc">{{ item.desc }}</div>
        <div class="desc" style="color: #f66">￥{{ item.price }}</div>
        <div class="desc">月销量{{ item.sales }} 评分{{ item.rating }}</div>
      </div>
    </li>
>>>>>>> 61d95511f5bb548966870409910cdf315f439697
  </ul>
</template>

<script>
export default {
  props: {
    prolist: {
      type: Array,
      default: () => {
        return []
      }
    },
    hot: {
      type: Boolean,
      default: false
    }
<<<<<<< HEAD
=======
  },
  methods: {
    toDetail (proid) {
      console.log(proid)
      // this.$router.push('/detail/' + proid)
      // this.$router.push({ name: 'detail', params: { proid } })
      this.$router.push({ path: '/detail/' + proid })
    }
>>>>>>> 61d95511f5bb548966870409910cdf315f439697
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
.prolist {
<<<<<<< HEAD
  @include overflow(auto);
  .proitem {
    @include rect(100%, 120px);
    @include border(0 0 1px 0, #ccc,solid);
    @include box-sizing(border-box);
    @include flexbox();
    .itemimg {
      @include rect(1.1rem, 100%);
      img {
        @include rect(1rem, 1rem);
        @include border(1px, #ccc, solid);
        @include box-sizing(border-box);
        @include margin(0.05rem);
        @include display(block);
      }
    }
    .itemifo {
      @include padding(0.06rem 0.05rem);
      @include flex();
      p {
        @include ellipsis(100%, 1);
        @include rect(100%, 0.2rem);
      }
      .price {
        @include color(red);
=======
  @include clearfix();
  .proitem {
    @include rect(100%, 1rem);
    @include border(0 0 1px 0, #ccc, solid);
    @include flexbox();
    @include box-sizing(border-box);
    .itemimg {
      @include rect(1rem, 1rem);
      img {
        @include rect(0.9rem, 0.9rem);
        @include display(block);
        @include border(1px, #ccc, solid);
        @include margin(0.05rem);
        @include box-sizing(border-box);
      }
    }
    .iteminfo {
      @include flex();
      @include padding(0.03rem 0.05rem);
      .desc {
        @include ellipsis(100%, 1);
      }
    }
    .hot {
      @include fullscreen(3);
      @include font-size(28px);
      @include color(#f66);
    }

    &.hotitem {
      @include clearfix();
      @include rect(22%, auto);
      @include float(left);
      @include border(1px, #ccc, solid);
      @include flex-direction(column);
      @include margin(0 2px);
      .itemimg {
        @include rect(100%, auto);
        @include display(block);
        img {
          @include rect(100%, auto);
          @include display(block);
        }
      }
      .iteminfo {
        @include rect(100%, auto);
        @include display(block);
        h3 {
          @include ellipsis(100%, 1);
        }
        .desc {
          @include display(none);
        }
>>>>>>> 61d95511f5bb548966870409910cdf315f439697
      }
    }
  }
}
</style>
